<template>
	<n-modal class="my-chart-data-pond-control" :onEsc="() => emit('update:show', false)" v-bind="$attrs">
		<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
			<template #header></template>
			<template #header-extra></template>
			<div class="pond-content">
				<!-- 展示区域 -->
				<chart-data-display v-if="pondData && !loading" :targetData="pondData" />
				<!-- 无数据 -->
				<div v-else class="no-data flex-center">
					<img :src="getImgUrl('canvas/noData.png')" alt="暂无数据" />
					<n-text :depth="3">暂未选择公共接口</n-text>
				</div>
				<!-- 左侧列表 -->
				<chart-data-pond-list @createPond="createPond" @deletePond="deletePond"></chart-data-pond-list>
			</div>
			<!-- 底部 -->
			<template #action>
				<n-space justify="space-between">
					<n-button type="info" secondary :disabled="!pondData" @click="openPond(true)">
						编辑内容
						<template #icon>
							<n-icon>
								<pencil />
							</n-icon>
						</template>
					</n-button>
					<n-button type="primary" @click="closeHandle">保存 & 发送请求</n-button>
				</n-space>
			</template>
		</n-card>
	</n-modal>

	<!-- 请求配置model -->
	<chart-data-request
		v-model:show="requestShow"
		:targetData="{ request: editData }"
		saveBtnText="保存"
		@sendHandle="saveHandle"
	/>
</template>

<script setup>
import ChartDataPondList from '../ChartDataPondList/index.vue';
import ChartDataRequest from '../../../ChartDataRequest/index.vue';
import ChartDataDisplay from '../ChartDataDisplay/index.vue';
import { requestConfig } from '@/components/publicConfig';
import { getUUID } from '@/utils';

const emit = defineEmits(['update:show', 'sendHandle']),
	{ requestDataPond, getTargetData } = toRefs($store.chart);

// 所选数据池
const pondData = computed(() => {
	const selectId = getTargetData?.value?.request?.dataPondId;
	if (!selectId) return undefined;
	return requestDataPond.value.filter((item) => selectId === item.dataPondId)[0];
});

const loading = ref(false);
const editData = ref({});
watch(
	() => pondData.value,
	(newValue) => {
		loading.value = true;
		editData.value = newValue;
		nextTick(() => {
			loading.value = false;
		});
	},
	{ immediate: true }
);

// 打开/编辑
const isEdit = ref(false),
	requestShow = ref(false);
function openPond(isEditFlag = false) {
	isEdit.value = !!isEditFlag;
	requestShow.value = true;
}

// 创建
function createPond() {
	const id = getUUID();
	editData.value = {
		dataPondId: id,
		dataPondName: id,
		...requestConfig,
		requestDataType: 2
	};
	openPond();
}

// 完成创建/编辑
const saveHandle = (newData = editData.value) => {
	if (isEdit.value) {
		// 修改
		editSaveHandle(newData);
	} else {
		// 创建
		createSaveHandle(newData);
	}
	isEdit.value = false;
	requestShow.value = false;
};

// 编辑保存之后
const editSaveHandle = (newData) => {
	try {
		const targetIndex = requestDataPond.value.findIndex((item) => item.dataPondId === newData.dataPondId);
		if (targetIndex !== -1) {
			requestDataPond.value.splice(targetIndex, 1, newData);
			// 修改数据池后, 修改所有关联的组件
			// chartEditStore.getComponentList.forEach((item) => {
			// 	if (item.request.requestDataType === RequestDataTypeEnum.Pond && item.request.requestDataPondId === newData.dataPondId) {
			// 		item.request = {
			// 			...toRaw(newData.dataPondRequestConfig),
			// 			requestDataPondId: newData.dataPondId
			// 		}
			// 	}
			// })
			msgSuccess('保存成功！');
		} else {
			msgError('编辑失败，请稍后重试！');
		}
	} catch (error) {
		msgError('编辑失败，请稍后重试！');
	}
};

// 创建保存成功之后
const createSaveHandle = (newData) => {
	try {
		if (editData.value) {
			requestDataPond.value.unshift(newData);
			msgSuccess('创建成功!');
		} else {
			msgError('创建失败，请稍后重试!');
		}
	} catch (error) {
		msgError('创建失败，请稍后重试!');
	}
};

// 删除数据池
function deletePond(targetData) {
	confirm('删除数据后，需手动处理使用改接口的组件，是否继续？').then(() => {
		const targetIndex = requestDataPond.value.findIndex((item) => item.dataPondId === targetData.dataPondId);
		if (targetIndex !== -1) {
			requestDataPond.value.splice(targetIndex, 1);
			msgSuccess('删除成功!');
		} else {
			msgError('删除失败，请稍后重试！');
		}
	});
}

// 关闭
const closeHandle = () => {
	// 将所选内容赋值给对象
	if (pondData.value) {
		// getTargetData.orgConfig.request = {
		// 	...toRaw(pondData.value.dataPondRequestConfig),
		// 	requestDataPondId: pondData.value.dataPondId
		// }
	}
	emit('update:show', false);
	emit('sendHandle');
};
</script>

<style lang="scss" scoped>
@include b('chart-data-pond-control') {
	/* 中间 */
	.pond-content {
		display: flex;
	}
	.no-data {
		flex-direction: column;
		width: 100%;
		img {
			width: 200px;
		}
	}
	&.n-card.n-modal,
	.n-card {
		@extend .my-background-filter;
	}
	.n-card-shallow {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	// :deep() {
	& > .n-card__content {
		padding-right: 0;
	}
	.n-card__content {
		padding-bottom: 5px;
	}
	// }
}
</style>
